<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box"></div>
    <!-- <div><span style="color: red;">风</span>声雨声</div> -->
    <script>
      // 处理数据
      // let str = '<span style="color: red;">风</span>声雨声';
      let box = document.querySelector(".box");
      // box.innerHTML = str;

      // -------------使用replace方法 来实现匹配一个替换------
      // let str = "风声雨声读书声";
      // str.replace('要替换的字符','替换成哪个字符')
      // let res = str.replace("声", '<span style="color: red;">声</span>');
      // box.innerHTML = res;

      // ---------------------------将所有的字全部替换 replace方法参数一可以写成正则----------------------
      // let str = "风声雨声读书声";
      /*   let str = "aaaabbbbaaAA";
      // 正则表达式全局替换  /正则/gi  g是全局匹配 i是忽略大小写
      const res = str.replace(/k/gi, '<span style="color: red;">a</span>');
      console.log(res);
      box.innerHTML = res; */
      // 以上方式已经实现了全局匹配并替换, 但是在处理英文大小写的时候有问题
      //-----------------------------------------------------------------------------------
      // 正则表达式有两种定义方式 字面量 //  new RegExp(正则,匹配的规则) --支持写变量的
      let k = "a"; // 输入框的变量
      let str = "aaaabbbbaaAA";
      let reg = new RegExp(k, "gi"); // --- /a/gi
      // console.log(reg);
      // const res = str.replace(reg, 函数); 函数中有一个参数就是匹配到的字符 函数必须有返回值
      const res = str.replace(reg, (match) => {
        // a A
        // match 就是正则匹配到的字符
        return `<span style="color: red">${match}</span>`;
      });
      box.innerHTML = res;

      // ("(a ==1 && a== 2 && a==3) 有可能是 true 吗？");
      ('(<span style="color: red">a</span> ==1 && <span style="color: red">a</span>== 2 && <span style="color: red">a</span>==3) 有可能是 true 吗？');
    </script>
  </body>
</html>
